import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table, InputNumber,DatePicker,Popconfirm,Radio,Row,Col,TreeSelect} from 'antd';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class CheckAssetModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
     });
  };

  render() {
    const { children, dispatch,item,roomList,roomType,deptList} = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const getRoom = data => data.map((item) => {
      return <Option key={item.id_+''}>{item.name}</Option>
    })
    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.depts && d.depts.length > 0 ? treeData(d.depts) : [];
        return d;
      })
    }

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                style={{ top: 50}}
                width={1000}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
          <div style={{width:'auto',height:document.body.clientHeight - 236,position:'relative',backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>

            <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'10px'}}>
               <Form layout='horizontal' onSubmit={this.okHandler}>
                    <FormItem style={{marginBottom:'0px'}}>
                      {getFieldDecorator('presetDetailId',{initialValue:item.id_})(
                        <Input type="hidden"/>
                      )}
                    </FormItem>

                  <Row>
                      <Col span={12}>
                          <FormItem
                                {...formItemLayout}
                                label="资产编号"
                                hasFeedback
                              >
                                {
                                  getFieldDecorator('assetNo', {
                                    initialValue: item.assetNo,
                                    rules: [
                                      {required: true, whitespace: true, message: '请输入资产编号',},
                                      { max: 20, message: '资产编号 20 字符以内' },]
                                  })(<Input  placeholder="请输入资产编号"/>)
                                }
                          </FormItem>
                      </Col>
                      <Col span={12}>
                        <FormItem
                              {...formItemLayout}
                              label="设备序列号"
                              hasFeedback
                            >
                              {
                                getFieldDecorator('serialNo', {
                                  initialValue: item.serialNo,
                                  rules: [{
                                    required: true, whitespace: true, message: '请输入设备序列号',
                                  },{ max: 20, message: '设备序列号 20 字符以内' }]
                                })(<Input  placeholder="请输入设备序列号" />)
                              }
                        </FormItem>
                      </Col>
                    </Row>
                   <Row>
                      <Col span={12}>
                        <FormItem
                          label="RFID号"
                          hasFeedback
                          {...formItemLayout}
                        >
                          {getFieldDecorator('rfidNo', {
                            initialValue:item.rfidNo,
                            rules: [
                              { max: 20, message: 'RFID号 20 字符以内' }
                            ],
                          })(<Input  placeholder="请输入RFID号" />)}
                        </FormItem>
                     </Col>                              
                     <Col span={12}>
                        <FormItem
                          {...formItemLayout}
                          label="发票号"
                          >
                          {getFieldDecorator('invoiceNo', {
                            initialValue:item.invoiceNo,
                            rules: [
                              { max: 20, message: '发票号 20 字符以内' }
                            ],
                          })(<Input  placeholder="请输入发票号" />)}
                      </FormItem>
                    </Col>
                    </Row>  
                    <Row>     
                      <Col span={12}>
                        <FormItem
                              {...formItemLayout}
                              label="售后电话"
                              hasFeedback
                            >
                            {getFieldDecorator('hotline', {
                                  initialValue: item.hotline,
                                  rules: [{
                                     whitespace: true, max:20,message: '售后电话不能超过11位',
                                  }]
                                })(<Input placeholder="请输入售后电话" />)
                            }
                        </FormItem>
                      </Col>
                      <Col span={12}>
                      <FormItem
                        {...formItemLayout}
                        label="设备管理部门"
                        hasFeedback>
                        {
                          getFieldDecorator('manageBranchId', {
                            rules: [{
                              required: true, message: '请选择设备管理部门',
                            }]
                          })(
                            <TreeSelect
                              showSearch
                              treeNodeFilterProp="title"
                              notFoundContent="无匹配结果"
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="请选择设备管理部门"
                              allowClear
                              treeData={treeData(deptList)}
                              treeDefaultExpandAll
                            >
                             
                            </TreeSelect>
                            )
                        }
                      </FormItem>
                    </Col>
                   </Row>

                   <Row>  
                      <Col span={12}>
                        <FormItem
                          {...formItemLayout}
                          label="购置时间"
                          >
                          {getFieldDecorator('buyTime', {
                            initialValue:item.buyTime,
                          })(<DatePicker style={{ width: 250 }} />)}
                        </FormItem>        
                      </Col>            
                      <Col span={12}>
                        <FormItem
                          {...formItemLayout}
                          label="报修到期时间"
                          >
                          {getFieldDecorator('expirationTime', {
                            initialValue:item.expirationTime,
                          })(<DatePicker style={{ width: 250 }} />)}
                        </FormItem>
                      </Col>                     
                   </Row>
                   <Row>  
                     <Col span={12}>
                        <FormItem
                              {...formItemLayout}
                              label="所在位置"
                              hasFeedback
                            >
                          {getFieldDecorator('roomId', {
                            initialValue:item.roomId_? item.roomId_: undefined,
                            rules: [{
                               whitespace: true, message: '请选择位置',
                            }]
                          })(
                            <Select
                              showSearch
                              placeholder="请选择位置">

                              {getRoom(roomList)}
                            </Select>
                          )}
                        </FormItem>
                     </Col>
                  </Row>
                  {/*<Row>
                     <Col span={12}>
                        <FormItem
                          label="2.4G"
                          hasFeedback
                          {...formItemLayout}
                        >
                          {getFieldDecorator('rfidNo1', {
                            initialValue:item.rfidNo1,
                            rules: [
                              { required: true, message: '请填写2.4G编码' },
                              { max: 20, message: '2.4G号 20 字符以内' }
                            ],
                          })(<Input />)}
                        </FormItem>
                      </Col>  
                  </Row>          */}
             </Form>
          </div>
        </div>
       </div>

        </Modal>

      </span>
    );
  }

}

export default Form.create()(CheckAssetModal)
